<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>管理员列表-WeAdmin Frame型后台管理系统-WeAdmin 1.0</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
<link rel="stylesheet" href="../../static/css/font.css">
<link rel="stylesheet" href="../../static/css/weadmin.css">
<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
<!--[if lt IE 9]>
	      <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
	      <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
	    <![endif]-->
</head>

<body>
	<div class="weadmin-nav">
		<span class="layui-breadcrumb"> <a href="">首页</a> <a href="">文件管理</a>
			<a> <cite>视频列表</cite></a>
		</span> <a class="layui-btn layui-btn-sm"
			style="line-height: 1.6em; margin-top: 3px; float: right"
			href="javascript:location.replace(location.href);" id="refurbish" title="刷新"> <i
			class="layui-icon" style="line-height: 30px">ဂ</i></a>
	</div>
	<div class="weadmin-body">
		<div class="layui-row">
			<form class="layui-form layui-col-md12 we-search">
				<div class="layui-inline">
					<input class="layui-input" placeholder="开始日" name="start"
						id="start">
				</div>
				<div class="layui-inline">
					<input class="layui-input" placeholder="截止日" name="end" id="end">
				</div>
				<div class="layui-inline">
					<input type="text" name="username" placeholder="请输入用户名"
						autocomplete="off" class="layui-input">
				</div>
				<button class="layui-btn" lay-submit="" lay-filter="sreach">
					<i class="layui-icon">&#xe615;</i>
				</button>
			</form>
		</div>
		<div class="weadmin-block">
			<button type="button" class="layui-btn" id="upload">
			  	<i class="layui-icon">&#xe67c;</i>上传视频
			</button>
		</div>
		<script type="text/html" id="toolbarDemo">
		<div class="layui-btn-container">
			<button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="getCheckData">批量删除</button>
  		</div>
		</script>
		<script type="text/html" id="barDemo">
  			<a class="layui-btn layui-btn-xs" lay-event="view">查看</a>
		</script>
		<div class="layui-progress layui-progress-big" lay-filter="progressBar">
		  <div class="layui-progress-bar" lay-percent="0%"></div>
		</div>
		<table class="layui-hide" id="list" lay-filter="list"></table>
		<div id="page"></div>
	</div>
	<script src="../../lib/layui/layui.js" charset="utf-8"></script>
	<script src="../../static/js/admin.js" charset="utf-8"></script>
	<script type="text/javascript" charset="utf-8">
    	layui.extend({
			myHttp : '{/}../../static/js/myHttp'
		});
		layui.use(['jquery', 'myHttp', 'table', 'upload', 'laypage', 'element'], function(){
			var $ = layui.jquery;
			var myHttp = layui.myHttp;
			var table = layui.table;
			var upload = layui.upload;
			var laypage = layui.laypage;
			var element = layui.element;
			
			element.init();
			var interval;
			$(function(){
				var token = localStorage.getItem("token");
				  //执行实例
				  var uploadInst = upload.render({
				    elem: '#upload' //绑定元素
				    ,url: '/upload/video' //上传接口
				    ,accept : 'video'
				    ,exts : 'mp4'
				    ,headers: {Authorization: token}
				  	,before : function (obj) {
				  		interval = setInterval(function () {
		                	myHttp.get('/upload/getUploadProgress', null,
		    						function(res) {
		                				var v = res.data.readBytes / res.data.allBytes
		                				element.progress('progressBar', (v * 100) +'%')//设置页面进度条
		    						});
		                }, 1000); //每秒向服务端获取一次当前上传进度情况*/
		            }
				    ,done: function(res){
				    	layer.msg(res.data,function(){
				    		location.replace(location.href);	
				    	});
				    	element.progress('progressBar', '0%')//设置页面进度条
				    	clearInterval(interval);
				    }
				    ,error: function(){
				    	clearInterval(interval);
				    	element.progress('progressBar', '0%')//设置页面进度条
				    	layer.msg("异常出错");
				    }
				  });
				  
				  var tableIns = table.render({
					  elem: '#list'
					  ,method:'post'
					  ,contentType: 'application/json'
					  ,toolbar: '#toolbarDemo'
					  ,headers: {Authorization: token}
					  ,url: '/upload/video/list'
					  ,page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
					      layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
					      //,curr: 5 //设定初始在第 5 页
					      ,groups: 5 //只显示 1 个连续页码
					      ,first: false //不显示首页
					      ,last: false //不显示尾页
					    }
					  ,cols: [[
					      {checkbox: true, fixed: true}
					      ,{field:'id', title: 'ID', width:80, sort: true, fixed: true}
					      ,{field:'uuid', title: 'uuid'}
					      ,{field:'name', title: '文件名'}
					      ,{field:'type', title: '文件类型'}
					      ,{field:'size', title: '文件大小(MB)' ,templet: function(d){
					          return parseInt(d.size / 1024 / 1024)
					      }}
					      ,{field:'createTime', title: '创建时间' }
					      ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
					    ]]
					  ,parseData: function(res){ //res 即为原始返回的数据
					    return {
					      "code": 0, //解析接口状态
					      "msg": res.msg, //解析提示文本
					      "data": res.data.content, //解析数据列表
					      "count" : res.data.totalElements
					    };
					  }
					});
				  //头工具栏事件
				  table.on('toolbar(list)', function(obj){
				    var checkStatus = table.checkStatus(obj.config.id); //获取选中行状态
				    switch(obj.event){
				      case 'getCheckData':
				        var data = checkStatus.data;  //获取选中行数据
				        let arr1 = new Array()
				        for(let v of data) {
				        	arr1.push(v.id);
				        };
				        myHttp.del("/upload/video/del",arr1,function(res){
				        	layer.msg(res.data,function(){
					    		location.replace(location.href);	
					    	});
				        });
				      break;
				    };
				  });
				  //监听行工具事件
				  table.on('tool(list)', function(obj){
				    var data = obj.data;
				    
				    //console.log(obj)
				    switch(obj.event){
				    	case 'view':
				    		WeAdminShow('video','../video/view.html?uuid='+data.uuid)
				    	break;
				    }
				  });
				return false;
			});
			
		});
    	</script>
</body>

</html>